<template>
  <div style="height:100%;overflow-y: auto;overflow-x:hidden">
    <a-row :gutter="24" style="margin-left: 0;padding-top:14px">
      <a-col :span="4">
        <div class="topcol" id="topcol0">
          <p class="col-title">{{$t('今日收款')}}</p>
          <p class="col-num" style="cursor: pointer">
            <span class="col-num-unit">{{$t('￥')}}</span>{{ today.Income.total.toFixed(2) }}
          </p>
          <p class="col-detail">
            <span>{{$t('充值：')}}</span><span>{{ today.Income.recharge.toFixed(2) }}</span>
          </p>
          <p class="col-detail">
            <span>{{$t('其他：')}}</span><span>{{ today.Income.other.toFixed(2) }}</span>
          </p>
          <p class="col-detail">
            <span>{{$t('客单价：')}}</span><span>{{ today.Income.avgPrice.toFixed(2) }}</span>
          </p>
        </div>
      </a-col>
      <a-col :span="4">
        <div class="topcol" id="topcol3">
          <p class="col-title">{{$t('小程序收入')}}</p>
          <p class="col-num" style="cursor: pointer">
            <span class="col-num-unit">{{$t('￥')}}</span>{{ today.Applet.total.toFixed(2) }}
          </p>
          <p class="col-detail">
            <span>{{$t('充值：')}}</span><span>{{ today.Applet.recharge.toFixed(2) }}</span>
          </p>
          <p class="col-detail">
            <span>{{$t('其他：')}}</span><span>{{ today.Applet.other.toFixed(2) }}</span>
          </p>
          <p class="col-detail" style="opacity:0">
            <span>{{$t('其')}}</span>
          </p>
        </div>
      </a-col>
      <a-col :span="4">
        <div class="topcol" id="topcol1">
          <p class="col-title">{{$t('电子币消费')}}</p>
          <p class="col-num" style="cursor: pointer">
            {{ today.CoinConsume.total.toFixed(2) }}<span class="col-num-unit">{{$t('币')}}</span>
          </p>
          <p class="col-detail">
            <span>{{$t('机台：')}}</span><span>{{ today.CoinConsume.toCoin.toFixed(2) }}</span>
          </p>
          <p class="col-detail">
            <span>{{$t('门票')}}：</span><span>{{ today.CoinConsume.toTicket.toFixed(2) }}</span>
          </p>
          <p class="col-detail" style="opacity:0">
            <span>{{$t('门')}}</span>
          </p>
        </div>
      </a-col>
      <a-col :span="4">
        <div class="topcol" id="topcol2">
          <p class="col-title">{{$t('实币消费')}}</p>
          <p class="col-num" style="cursor: pointer">{{ today.CoinSale.total }}<span class="col-num-unit">{{$t('币')}}</span></p>
          <p class="col-detail"><span>{{$t('现金售币')}}：</span><span>{{ today.CoinSale.sale }}</span></p>
          <p class="col-detail"><span>{{$t('会员兑币')}}：</span><span>{{ today.CoinSale.exchange }}</span></p>
          <p class="col-detail" style="opacity:0"><span>{{$t('会')}}</span></p>
        </div>
      </a-col>
      <a-col :span="4">
        <div class="topcol" id="topcol4">
          <p class="col-title">{{$t('a_会员数量')}}</p>
          <p class="col-num" style="cursor: pointer">
            {{ today.Member.finalMember }}<span class="col-num-unit">{{$t('个')}}</span>
          </p>
          <p class="col-detail">
            <span>{{$t('今日增量：')}}</span><span>{{ today.Member.addMember.toFixed(0) }}</span>
          </p>
          <p class="col-detail">
            <span>{{$t('其中充值：')}}</span><span>{{ today.Member.addMemberWithStore.toFixed(0) }}</span>
          </p>
          <p class="col-detail">
            <span>{{$t('客流量')}}：</span><span>{{ today.Ope.customerCount.toFixed(0) }}</span>
            <a-tooltip>
              <template slot="title">{{
                $t(
                  '当前运营日内的到店人数，即非会员销售订单笔数+会员到店人数；因为非会员没有身份所以按购买订单统计，因此会存在一定的误差'
                )
              }}</template>
              <a-icon type="question-circle" style="margin-left: 5px" />
            </a-tooltip>
          </p>
        </div>
      </a-col>
      <a-col :span="4">
        <div class="topcol" id="topcol5">
          <p class="col-title">{{$t('会员余币')}}</p>
          <p class="col-num" style="cursor: pointer; font-size: 19px">
            {{ today.Coin.finalCoin.toFixed(2) }}<span class="col-num-unit">{{$t('币')}}</span>
          </p>
          <p class="col-num" style="cursor: pointer; font-size: 19px">
            {{ today.Coin.finalLottery.toFixed(0) }}<span class="col-num-unit">{{$t('票')}}</span>
          </p>
          <p class="col-detail">
            <span>{{$t('今日充：')}}</span><span>{{ today.Coin.rechargeCoin.toFixed(2) }}</span>
          </p>
          <p class="col-detail">
           <span> {{$t('今日消：')}}</span><span>{{ today.Coin.subCoin.toFixed(2) }}</span>
          </p>
          <p class="col-detail">
            <span>{{$t('币单价')}}：</span><span>{{ today.Ope.coinPrice.toFixed(2) }}</span>
            <a-tooltip>
              <template slot="title">{{
                $t(
                  '当前运营日内会员购币和非会员购币折合后的每币价值，即(会员充币金额+非会员购币金额)/(会员充币币值+非会员购币币值)'
                )
              }}</template>
              <a-icon type="question-circle" style="margin-left: 5px" />
            </a-tooltip>
          </p>
        </div>
      </a-col>
    </a-row>
    <a-row style="margin-top: 16px; margin-left: 0; margin-right: 0">
      <a-col :span="14" align="center" style="position: relative">
        <div
          style="
            border-left: 3px solid #541b86;
            padding-left: 6px;
            position: absolute;
            left: 30px;
            top: 12px;
            z-index: 4;
            line-height: 1;
            font-weight: 800;
          "
        >
          {{$t('收入')}}
        </div>
        <div class="down-charts" id="myChart1"></div>
      </a-col>
      <a-col :span="10" align="center">
        <div class="down-charts" id="myChart2"></div>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="9" align="center" style="position: relative">
        <div
          style="
            border-left: 3px solid #541b86;
            padding-left: 6px;
            position: absolute;
            left: 30px;
            top: 12px;
            z-index: 4;
            line-height: 1;
            font-weight: 800;
          "
        >
          {{$t('会员')}}
        </div>
        <div class="down-charts down-charts1" id="myChart3"></div>
      </a-col>
      <a-col :span="9" align="center">
        <div class="down-charts down-charts1" id="myChart4"></div>
      </a-col>
      <a-col :span="6" align="center" style="position: relative">
        <div style="background: #fff; position: absolute; top: 10px; left: 35px; z-index: 1">
          <a-tag class="pieTag" :color="checkMember == 1 ? '#108ee9' : ''" @click="handleClick(1)"> {{$t('数量占比')}} </a-tag>
          <a-tag class="pieTag" :color="checkMember == 2 ? '#108ee9' : ''" @click="handleClick(2)"> {{$t('余币占比')}} </a-tag>
        </div>
        <div class="down-charts down-charts1" style="padding-top: 24px" id="myChart5"></div>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24" align="center">
        <div class="down-charts" id="myChart6"></div>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24" align="center">
        <div class="down-charts" id="myChart7"></div>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="10" align="center" style="position: relative">
        <div
          style="
            border-left: 3px solid #541b86;
            padding-left: 6px;
            position: absolute;
            left: 30px;
            top: 12px;
            z-index: 4;
            line-height: 1;
            font-weight: 800;
          "
        >
          {{$t('商品')}}
        </div>
        <div class="down-charts" id="myChart8"></div>
      </a-col>
      <a-col :span="14" align="center" style="position: relative">
        <div
          v-if="isList"
          style="
            position: absolute;
            left: 100px;
            right: 100px;
            top: 10px;
            text-align: center;
            font-size: 18px;
            font-weight: bolder;
            color: #333;
            font-family: 'sans-serif';
            z-index: 10;
          "
        >
          {{$t('商品销售统计')}}
        </div>
        <div style="background: #fff; position: absolute; top: 10px; left: 20px; z-index: 999999">
          <a-tag :class="isList ? 'allTag secTag' : 'allTag'" @click="handleSalesClick(1)"> {{$t('列表')}} </a-tag>
          <a-tag :class="!isList ? 'allTag secTag' : 'allTag'" @click="handleSalesClick(2)"> {{$t('词云')}} </a-tag>
        </div>
        <div class="down-charts" id="myChart9"></div>
        <div v-show="isList" class="down-charts down-chartstable" ref="goodsTable">
          <a-table
            class="homeTable goodsTable"
            v-if="isList"
            :columns="goodsColumns"
            :data-source="goodsData"
            size="small"
            :pagination="false"
            :scroll="{ y: height }"
          />
        </div>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24" align="center">
        <div class="down-charts" id="myChart10"></div>
      </a-col>
    </a-row>

    <warn-modal ref="warnModal"></warn-modal>
    <first-step-modal ref="modalForm"></first-step-modal>
  </div>
</template>

<script>
import Vue from 'vue'
import IndexChart from './IndexChart'
import IndexTask from './IndexTask'
import IndexBdc from './IndexBdc'
import FirstStepModal from './modules/FirstStepModal'
import { getAction } from '@/api/manage'
import WarnModal from '@/components/tools/WarnModal'
import dayjs from 'dayjs'
let myChart1, myChart2, myChart3, myChart4, myChart5, myChart6, myChart7, myChart8, myChart9, myChart10, busiTime
export default {
  name: 'Analysis',
  components: {
    IndexChart,
    IndexTask,
    IndexBdc,
    FirstStepModal,
    WarnModal,
  },
  data() {
    return {
      detailModalVisible: false,
      result: [],
      result1: [],
      result2: [],
      result3: [],
      result4: [],
      result5: [],
      result6: [],
      result7: [],
      checkMember: 1,
      isList: true,
      goodsColumns: [
        {
          title: this.$t('卖品名称'),
          dataIndex: 'goodsName',
          align: 'center',
        },
        {
          title: this.$t('数量'),
          dataIndex: 'amount',
          align: 'center',
        },
        {
          title: this.$t('金额'),
          dataIndex: 'payAmount',
          align: 'center',
        },
      ],
      goodsData: [],
      today: {
        Income: { total: 0, recharge: 0, other: 0, avgPrice: 0 },
        Applet: { total: 0, recharge: 0, other: 0 },
        CoinConsume: { total: 0, toCoin: 0, toTicket: 0 },
        CoinSale: { total: 0, sale: 0, exchange: 0 },
        Member: { finalMember: 0, addMember: 0, addMemberWithStore: 0 },
        Coin: { finalCoin: 0, finalLottery: 0, addCoin: 0, subCoin: 0 , rechargeCoin: 0},
        Ope: { customerCount: 0, coinPrice: 0 }
      },
      height: 100,
      secCinemaId: '0',
      tenantid:Vue.ls.get('TENANT_ID'),
      isHideData: false,
    }
  },
  created() {
    console.log()
    let that = this
    that.shopList()
  },
  mounted() {
    let that = this
    that.checkMember = 1
    if(that.tenantid){
      getAction('/report/home/systemWarning').then((res) => {
        if (res.success) {
          let count = 0
          if (res.result.giftBalance!==undefined){
            count += 1
          }
          if (res.result.systemValid!==undefined){
            count += 1
          }
          count =
            count +
            res.result.inOrder +
            res.result.allotOrder +
            res.result.backOrder +
            res.result.buyOrder +
            res.result.lossOrder +
            res.result.goodsStockStatus
          if (count > 0) {
            that.$refs.warnModal.show()
          }
        } else {
          that.$message.error(res.message)
        }
      })
    }

    setTimeout(function () {
      // 获取经营时间
      getAction('/bis/bisSysParameter/queryByName',{name : 'startTime'}).then((res) => {
        if (res.success) {
          busiTime = res.result.svalue
        } else {
          busiTime = "00:00:00"
        }
        that.customInit(true)
      })
    }, 1)
  },
  watch: {
    result(value) {
      this.test1(value)
    },
    result1(value) {
      this.test2(value)
    },
    result2(value) {
      this.test3(value)
      this.test4(value)
    },
    result3(value) {
      this.test5(value, 1)
    },
    result4(value) {
      this.test6(value)
      this.test7(value)
    },
    result5(value) {
      this.test8(value)
    },
    result6(value) {
      this.test9(value, 1)
      this.height = this.$refs.goodsTable.offsetHeight - 80
    },
    result7(value) {
      this.test10(value)
    },
  },
  methods: {
    shopList() {
      getAction('/shop/bisShop/count').then((res) => {
        if (res.result == 0) {
          this.$refs.modalForm.show()
        }
      })
    },
    customInit(bol){
      let that = this
      that.isHideData = bol
      that.getData()
    },
    getData() {
      let that = this
      myChart1 = this.$echarts.init(document.getElementById('myChart1'))
      myChart2 = this.$echarts.init(document.getElementById('myChart2'))
      myChart3 = this.$echarts.init(document.getElementById('myChart3'))
      myChart4 = this.$echarts.init(document.getElementById('myChart4'))
      myChart5 = this.$echarts.init(document.getElementById('myChart5'))
      myChart6 = this.$echarts.init(document.getElementById('myChart6'))
      myChart7 = this.$echarts.init(document.getElementById('myChart7'))
      myChart8 = this.$echarts.init(document.getElementById('myChart8'))
      myChart9 = this.$echarts.init(document.getElementById('myChart9'))
      myChart10 = this.$echarts.init(document.getElementById('myChart10'))
      myChart1.showLoading({
        text: 'loading',
        color: '#000',
        maskColor: 'rgba(255, 255, 255, 0.8)',
      })
      myChart2.showLoading({
        text: 'loading',
        color: '#000',
        maskColor: 'rgba(255, 255, 255, 0.8)',
      })
      myChart3.showLoading({
        text: 'loading',
        color: '#000',
        maskColor: 'rgba(255, 255, 255, 0.8)',
      })
      myChart4.showLoading({
        text: 'loading',
        color: '#000',
        maskColor: 'rgba(255, 255, 255, 0.8)',
      })
      myChart5.showLoading({
        text: 'loading',
        color: '#000',
        maskColor: 'rgba(255, 255, 255, 0.8)',
      })
      myChart6.showLoading({
        text: 'loading',
        color: '#000',
        maskColor: 'rgba(255, 255, 255, 0.8)',
      })
      myChart7.showLoading({
        text: 'loading',
        color: '#000',
        maskColor: 'rgba(255, 255, 255, 0.8)',
      })
      myChart8.showLoading({
        text: 'loading',
        color: '#000',
        maskColor: 'rgba(255, 255, 255, 0.8)',
      })
      myChart9.showLoading({
        text: 'loading',
        color: '#000',
        maskColor: 'rgba(255, 255, 255, 0.8)',
      })
      myChart10.showLoading({
        text: 'loading',
        color: '#000',
        maskColor: 'rgba(255, 255, 255, 0.8)',
      })
      let querydata = {}
      querydata.beginTime = getDay(0)
      querydata.endTime = getDay(0)
      querydata.pageNo = 1
      querydata.pageSize = 9999
      querydata.dataType = that.isHideData ? 1 : 0
      getAction('/report/homeV2/memberOperation', querydata).then((res) => {
        if (res.success) {
          that.today.Ope.customerCount = res.result.records[0].customerCount
          that.today.Ope.coinPrice = res.result.records[0].coinPrice
        } else {
          that.$message.error(res.message)
        }
      })
      getAction('/report/homeV2/appletIncome', querydata).then((res) => {
        if (res.success) {
          that.today.Applet.total = res.result.records[0].total
          that.today.Applet.recharge = res.result.records[0].recharge
          that.today.Applet.other = res.result.records[0].other
        } else {
          that.$message.error(res.message)
        }
      })
      getAction('/report/homeV2/coinSale', querydata).then((res) => {
        if (res.success) {
          that.today.CoinSale.total = res.result.records[0].total
          that.today.CoinSale.sale = res.result.records[0].sale
          that.today.CoinSale.exchange = res.result.records[0].exchange
        } else {
          that.$message.error(res.message)
        }
      })
      let querydataTwo = {}
      querydataTwo.beginTime = getDay(-6)
      querydataTwo.endTime = getDay(0)
      querydataTwo.dataType = that.isHideData ? 1 : 0
      getAction('/report/homeV2/goodsForm', querydataTwo).then((res) => {
        if (res.success) {
          this.result = res.result.records
        } else {
          that.$message.error(res.message)
        }
      })
      getAction('/report/homeV2/coinConsume', querydataTwo).then((res) => {
        if (res.success) {
          this.result1 = res.result.records
          that.today.CoinConsume.total = res.result.records[6].total
          that.today.CoinConsume.toCoin = res.result.records[6].toCoin
          that.today.CoinConsume.toTicket = res.result.records[6].toTicket
        } else {
          that.$message.error(res.message)
        }
      })
      getAction('/report/homeV2/memberType',{dataType: that.isHideData ? 1 : 0}).then((res) => {
        if (res.success) {
          that.result3 = res.result.records
        } else {
          that.$message.error(res.message)
        }
      })
      let querydataThree = {}
      querydataThree.endTime = getDay(0)
      querydataThree.beginTime = getDay(-29)
      querydataThree.pageNo = 1
      querydataThree.pageSize = 30
      querydataThree.dataType = that.isHideData ? 1 : 0
      getAction('/report/homeV2/member', querydataThree).then((res) => {
        if (res.success) {
          let list = res.result.records
          that.result4 = res.result.records
          that.today.Member.finalMember = list[res.result.records.length-1].finalMember
          that.today.Member.addMember = list[res.result.records.length-1].addMember
          that.today.Member.addMemberWithStore = list[res.result.records.length-1].addMemberWithStore
          that.today.Coin.finalCoin = list[res.result.records.length-1].finalCoin
          that.today.Coin.finalLottery = list[res.result.records.length-1].finalLottery
          that.today.Coin.addCoin = list[res.result.records.length-1].addCoin
          that.today.Coin.subCoin = list[res.result.records.length-1].subCoin
          that.today.Coin.rechargeCoin = list[res.result.records.length-1].rechargeCoin
          that.result2 = list.slice(res.result.records.length-7, res.result.records.length)
        } else {
          that.$message.error(res.message)
        }
      })

      getAction('/report/homeV2/goodsKind', querydata).then((res) => {
        if (res.success) {
          this.result5 = res.result.records
        } else {
          that.$message.error(res.message)
        }
      })
      querydata.orderType = 0;
      getAction('/report/homeV2/goods', querydata).then((res) => {
        if (res.success) {
          this.result6 = res.result.records
        } else {
          that.$message.error(res.message)
        }
      })

      getAction('/report/homeV2/income', querydataThree).then((res) => {
        if (res.success) {
          this.result7 = res.result.records
          that.today.Income.total = res.result.records[res.result.records.length - 1].total
          that.today.Income.recharge = res.result.records[res.result.records.length - 1].recharge
          that.today.Income.other = res.result.records[res.result.records.length - 1].other
          that.today.Income.avgPrice = res.result.records[res.result.records.length - 1].avgPrice
        } else {
          that.$message.error(res.message)
        }
      })
    },
    dayAxios(list, arg) {
      let dayAxios = []
      list.forEach((lt) => {
        if (arg) {
          let day = new Date(lt.date).getDay(),
            dayText = ''
          if (arg == 'week') {
            switch (day) {
              case 1:
                dayText = this.$t('周一')
                break
              case 2:
                dayText = this.$t('周二')
                break
              case 3:
                dayText = this.$t('周三')
                break
              case 4:
                dayText = this.$t('周四')
                break
              case 5:
                dayText = this.$t('周五')
                break
              case 6:
                dayText = this.$t('周六')
                break
              default:
                dayText = this.$t('周日')
                break
            }
            dayAxios.push(dayjs(new Date(lt.date)).format('MM-DD') + ' ' + dayText)
          }
          if (arg == 'month') {
            dayAxios.push(dayjs(new Date(lt.date)).format('yyyy-MM'))
          }
        } else {
          dayAxios.push(dayjs(new Date(lt.date)).format('MM-DD'))
        }
      })
      return dayAxios
    },
    dataBarOrLineAxios(list, arg) {
      let dataAxios = []
      list.forEach((lt) => {
        dataAxios.push(lt[arg])
      })
      return dataAxios
    },
    dataBarOrLineAxiosTwo(list, arg1) {
      let dataAxios = []
      list.forEach((lt, ind) => {
        lt.list.forEach((ag) => {
          if (ag.form == arg1) dataAxios.push(ag.payAmount)
        })
      })
      return dataAxios
    },
    dataPieAxios(list, arg1, arg2) {
      let dataAxios = []
      list.forEach((lt) => {
        dataAxios.push({
          value: lt[arg1],
          name: lt[arg2],
        })
      })
      return dataAxios
    },
    min3(list, arg) {
      let min = Math.min.apply(
        Math,
        list.map((item) => {
          let num = 0
          if (arg) {
            num = item[arg]
          } else {
            num = item
          }
          return num
        })
      )
      min = Math.floor(min)
      return Number(min)
    },
    max(list, arg) {
      let max = Math.max.apply(
        Math,
        list.map((item) => {
          return item[arg]
        })
      )
      max = '' + max
      if (max.indexOf('.') > -1) {
        max = max.substring(0, max.indexOf('.'))
      }
      let len = max.length
      max = (Number(max.substring(0, 1)) + 1) * Math.pow(10, len - 1)
      return Number(max)
    },
    test1(list) {
      let that = this
      myChart1 = that.$echarts.init(document.getElementById('myChart1'))
      myChart1.hideLoading()
      myChart1.clear()
      let seriesDate = [],data = []
      list[0].list.forEach((col) => {
        data.push(col.form_dictText)
        col.name = col.form_dictText
        col.type = 'bar'
        col.data = that.dataBarOrLineAxiosTwo(list, col.form)
        col.barWidth = '20%'
        col.stack = 'stack'
        seriesDate.push(col)
      })
      data.push(this.$t('充值占比')),
      seriesDate[list[0].list.length] = {
        //折线
        name: this.$t('充值占比'),
        type: 'line',
        symbol: 'circle', // 折线点设置为实心点
        yAxisIndex: 1, // 这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。
        data: that.dataBarOrLineAxios(list, 'rechargeRate'),
        symbolSize: 10,// 折线点的大小
        itemStyle: {
          normal: {
            color: '#4284FC',
          },
        },
      }
      myChart1.setOption(
        {
          title: {
            text: this.$t('现金收入分析'),
            left: 'center',
            show: true,
          },
          tooltip: {
            trigger: 'axis',
            textStyle: {
              align: 'left',
            },
            formatter: function (params) {
              let str = params[0].name
              params.forEach((ps, ind) => {
                if (ind < params.length - 1) {
                  str += '<br/>' +
                    '<span style="display:inline-block;margin-right:6px;width:10px;height:10px;border-radius:10px;background-color:' +
                    ps.color + ';"></span>' + ps.seriesName + ':' + ps.value
                } else {
                  str += '<br/>' +
                    '<span style="display:inline-block;margin-right:6px;width:10px;height:10px;border-radius:10px;background-color:' +
                    ps.color + ';"></span>' + ps.seriesName + ':' + ps.value + '%'
                }
              })
              return str
            },
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999',
              },
            },
          },
          grid: {
            show: false,
            top: '40',
            bottom: '60',
            right: '60',
            left: '60',
          },
          legend: {
            show: true,
            // data: ['会员充币', '现金售币', '门票', '实体商品', '套餐', '充值占比'],
            data:data,
            bottom: 0,
            // right: 'center',
            itemHeight: 9,
            itemWidth: 8,
            icon: 'roundRect',
            textStyle: {
              //color: '#666',
              fontSize: 11,
            },
          },
          color: ['#F5A518', '#BF0FB0', '#00F6FF', '#3F90FF', '#B4E420'],
          xAxis: {
            splitLine: { show: false },
            type: 'category',
            data: that.dayAxios(list),
            axisPointer: {
              type: 'shadow',
            },
            // 改变x轴颜色
            axisLine: {
              lineStyle: {
                //color: '#00a2e2',
                width: 1, // 这里是为了突出显示加上的
              },
            },
            axisTick: {
              show: true,
              interval: 0,
            },
          },
          // 设置两个y轴，左边显示数量，右边显示概率
          yAxis: [
            {
              splitLine: { show: false },
              type: 'value',
              name: '',
              min: 0,
              minInterval: 1,
              show: true,
              // 改变y轴颜色
              axisLine: {
                lineStyle: {
                  //color: '#00a2e2',
                  width: 1, // 这里是为了突出显示加上的
                },
              },
            },
            {
              splitLine: { show: false },
              type: 'value',
              name: '',
              min: 0,
              max: 100,//that.max(list,'rechargeRate')>100?that.max(list,'rechargeRate'):100,
              interval: 20,
              // 改变y轴颜色
              axisLine: {
                lineStyle: {
                  //color: '#00a2e2',
                  width: 1, // 这里是为了突出显示加上的
                },
              },
              axisLabel: {
                formatter: '{value} %',
              },
            },
          ],
          // 每个设备分数量、概率2个指标，只要让他们的name一致，即可通过，legeng进行统一的切换
          series: seriesDate,
        },
        true
      )
    },
    test2(list) {
      let that = this
      myChart2 = that.$echarts.init(document.getElementById('myChart2'))
      myChart2.hideLoading()
      myChart2.setOption({
        title: {
          text: this.$t('经营收入分析'),
          left: 'center',
          show: true,
        },
        tooltip: {
          trigger: 'axis',
          textStyle: {
            align: 'left',
          },
          formatter: function (params) {
            let str = params[0].name
            params.forEach((ps, ind) => {
              if (ind < params.length - 1) {
                str += '<br/>' +
                  '<span style="display:inline-block;margin-right:6px;width:10px;height:10px;border-radius:10px;background-color:' +
                  ps.color + ';"></span>' + ps.seriesName + ':' + ps.value
              } else {
                str += '<br/>' +
                  '<span style="display:inline-block;margin-right:6px;width:10px;height:10px;border-radius:10px;background-color:' +
                  ps.color + ';"></span>' + ps.seriesName + ':' + ps.value + '%'
              }
            })
            return str
          },
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },
        grid: {
          show: false,
          top: '40',
          bottom: '50',
          right: '60',
          left: '60',
        },
        legend: {
          show: true,
          data: [this.$t('投币项目'), this.$t('门票项目'), this.$t('门票占比')],
          bottom: 0,
          right: 'center',
          itemHeight: 12,
          itemWidth: 12,
          icon: 'roundRect',
          textStyle: {
            fontSize: 11,
          },
        },
        color: ['#014f6c', '#259eab'],
        xAxis: {
          splitLine: { show: false },
          type: 'category',
          data: that.dayAxios(list),
          axisPointer: {
            type: 'shadow',
          },
          // 改变x轴颜色
          axisLine: {
            lineStyle: {
              //color: '#00a2e2',
              width: 1, // 这里是为了突出显示加上的
            },
          },
          axisTick: {
            show: true,
            interval: 0,
          },
        },
        // 设置两个y轴，左边显示数量，右边显示概率
        yAxis: [
          {
            splitLine: { show: false },
            type: 'value',
            name: '',
            min: 0,
            axisLine: {
              lineStyle: {
                width: 1, // 这里是为了突出显示加上的
              },
            },
          },
          {
            splitLine: { show: false },
            type: 'value',
            name: '',
            min: 0,
            max: 100,
            interval: 20,
            axisLine: {
              lineStyle: {
                width: 1, // 这里是为了突出显示加上的
              },
            },
            axisLabel: {
              formatter: '{value} %',
            },
          },
        ],
        // 每个设备分数量、概率2个指标，只要让他们的name一致，即可通过，legeng进行统一的切换
        series: [
          {
            name: this.$t('投币项目'),
            type: 'bar',
            data: that.dataBarOrLineAxios(list, 'toCoin'),
            barWidth: '20%',
            stack: this.$t('总量'),
          },
          {
            name: this.$t('门票项目'),
            type: 'bar',
            data: that.dataBarOrLineAxios(list, 'toTicket'),
            barWidth: '20%',
            stack: this.$t('总量'),
          },
          {
            //折线
            name: this.$t('门票占比'),
            type: 'line',
            symbol: 'circle', // 折线点设置为实心点
            symbolSize: 8, // 折线点的大小
            yAxisIndex: 1, // 这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。
            data: that.dataBarOrLineAxios(list, 'toTicketRate'),
            itemStyle: {
              normal: {
                color: '#4284FC',
              },
            },
            areaStyle: {
              color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#4284FC',
                },
                {
                  offset: 1,
                  color: '#ffe',
                },
              ]),
            },
          },
        ],
      })
    },
    test3(list) {
      let that = this
      myChart3 = this.$echarts.init(document.getElementById('myChart3'))
      myChart3.hideLoading()
      myChart3.setOption({
        title: {
          left: 'center',
          text: this.$t('会员充值消费分析'),
          show: true,
        },
        grid: {
          show: false,
          top: '40',
          bottom: '50',
          right: '30',
          left: '60',
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: that.dayAxios(list),
        },
        tooltip: {
          trigger: 'axis',
          textStyle: {
            align: 'left',
          },
        },
        legend: {
          itemHeight: 12,
          itemWidth: 12,
          data: [this.$t('充值'), this.$t('消费')],
          icon: 'rect',
          right: 'center',
          bottom: 0,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: this.$t('充值'),
            data: that.dataBarOrLineAxios(list, 'addCoin'),
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                color: '#2CC968',
                opacity: 1,
              },
            },
            areaStyle: {
              color: '#2CC968',
              opacity: 1,
            },
          },
          {
            name: this.$t('消费'),
            data: that.dataBarOrLineAxios(list, 'subCoin'),
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                color: '#E9E52C',
                opacity: 1,
              },
            },
            areaStyle: {
              color: '#E9E52C',
              opacity: 1,
            },
          },
        ],
      })
    },
    test4(list) {
      let that = this
      myChart4 = this.$echarts.init(document.getElementById('myChart4'))
      myChart4.hideLoading()
      myChart4.setOption({
        title: {
          left: 'center',
          text: this.$t('会员增量走势图'),
          show: true,
        },
        grid: {
          show: false,
          top: '40',
          bottom: '50',
          right: '30',
          left: '40',
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: that.dayAxios(list),
        },
        tooltip: {
          trigger: 'axis',
          textStyle: {
            align: 'left',
          },
        },
        legend: {
          itemHeight: 12,
          itemWidth: 12,
          data: [this.$t('新增会员'), this.$t('新增充值')],
          icon: 'rect',
          right: 'center',
          bottom: 0,
        },
        yAxis: {
          type: 'value',
          minInterval: 1,
        },
        series: [
          {
            name: this.$t('新增会员'),
            data: that.dataBarOrLineAxios(list, 'addMember'),
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                color: '#7b2ecd',
                opacity: 1,
              },
            },
            areaStyle: {
              color: '#7b2ecd',
              opacity: 1,
            },
          },
          {
            name: this.$t('新增充值'),
            data: that.dataBarOrLineAxios(list, 'addMemberWithStore'),
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                color: '#e5bac6',
                opacity: 1,
              },
            },
            areaStyle: {
              color: '#e5bac6',
              opacity: 1,
            },
          },
        ],
      })
    },
    test5(list, arg) {
      let that = this
      myChart5 = this.$echarts.init(document.getElementById('myChart5'))
      // 经营总收入
      myChart5.hideLoading()
      let data = []
      if (arg == 1) {
        data = that.dataPieAxios(list, 'count', 'memberType_dictText')
      }
      if (arg == 2) {
        data = that.dataPieAxios(list, 'realCoin', 'memberType_dictText')
      }
      myChart5.setOption({
        title: {
          show: false,
          text: this.$t('会员占比'),
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          right: 30,
          top: 'center',
          icon: 'circle',
          data: that.dataBarOrLineAxios(list, 'memberType_dictText'),
          formatter: function (name) {
            var target
            for (var i = 0, l = data.length; i < l; i++) {
              if (data[i].name == name) {
                target = data[i].value
              }
            }
            var arr = [name + '：' + target]
            return arr.join('\n')
          },
          type: 'scroll',
          pageIconColor: '#444',
          pageIconInactiveColor: '#eee',
        },
        series: [
          {
            name: this.$t('会员占比'),
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['30%', '50%'],
            data:
              arg == 1
                ? that.dataPieAxios(list, 'count', 'memberType_dictText')
                : that.dataPieAxios(list, 'realCoin', 'memberType_dictText'),
            label: {
              normal: {
                show: true,
                position: 'inner',
                formatter: '{d}%',
              },
            },
          },
        ],
      })
    },
    test6(list) {
      let that = this
      myChart6 = this.$echarts.init(document.getElementById('myChart6'))
      // 经营总收入
      myChart6.hideLoading()
      let legendData = [],
        text = '',
        series = [],
        yAxis,
        minArr = [],
        xAxisData = []
      myChart6.clear()
      text = this.$t('会员人数总量指标')
      legendData = [this.$t('会员总人数'), this.$t('币值=0'), this.$t('币值≠0')]
      minArr.push(that.min3(list, 'finalMember'))
      minArr.push(that.min3(list, 'finalFanMember'))
      minArr.push(that.min3(list, 'finalStoreMember'))
      yAxis = {
        type: 'value',
        min: that.min3(minArr),
      }
      series = [
        {
          name: this.$t('会员总人数'),
          type: 'line',
          symbol: 'circle',
          symbolSize: 1,
          data: that.dataBarOrLineAxios(list, 'finalMember'),
          itemStyle: {
            normal: {
              color: '#F5A518',
            },
          },
        },
        {
          name: this.$t('币值=0'),
          type: 'line',
          symbol: 'circle', // 折线点设置为实心点
          symbolSize: 1, // 折线点的大小
          data: that.dataBarOrLineAxios(list, 'finalFanMember'),
          itemStyle: {
            normal: {
              color: '#BF0FB0',
            },
          },
        },
        {
          name: this.$t('币值≠0'),
          type: 'line',
          symbol: 'circle', // 折线点设置为实心点
          symbolSize: 1, // 折线点的大小
          data: that.dataBarOrLineAxios(list, 'finalStoreMember'),
          itemStyle: {
            normal: {
              color: '#00F6FF',
            },
          },
        },
      ]
      myChart6.setOption({
        title: {
          text: text,
          left: 'center',
          show: true,
        },
        tooltip: {
          trigger: 'axis',
          textStyle: {
            align: 'left',
          },
          formatter: function (params) {
            let str = params[0].name
            params.forEach((ps, ind) => {
              str +=
                '<br/>' +
                '<span style="display:inline-block;margin-right:6px;width:10px;height:10px;border-radius:10px;background-color:' +
                ps.color +
                ';"></span>' +
                ps.seriesName +
                ':' +
                ps.value
            })
            return str
          },
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },
        grid: {
          show: false,
          top: '60',
          bottom: '50',
          right: '60',
          left: '60',
        },
        legend: {
          show: true,
          data: legendData,
          bottom: 0,
          right: 'center',
          itemHeight: 6,
          itemWidth: 20,
          icon: 'roundRect',
          textStyle: {
            fontSize: 11,
          },
        },
        xAxis: {
          splitLine: { show: false },
          type: 'category',
          data: that.dayAxios(list),
          axisPointer: {
            type: 'shadow',
          },
          // 改变x轴颜色
          axisLine: {
            lineStyle: {
              width: 1, // 这里是为了突出显示加上的
            },
          },
          axisTick: {
            show: true,
            interval: 0,
          },
        },
        yAxis: yAxis,
        series: series,
      })
    },
    test7(list, arg) {
      let that = this
      myChart7 = this.$echarts.init(document.getElementById('myChart7'))
      // 经营总收入
      myChart7.hideLoading()
      let legendData = [],
        text = '',
        series = [],
        yAxis
      myChart7.clear()
      text = this.$t('会员余币总量指标')
      legendData = [this.$t('会员余币'), this.$t('平均余币')]
      yAxis = [
        {
          splitLine: { show: false },
          type: 'value',
          name: this.$t('会员余币'),
          min: that.min3(list, 'finalCoin'),
          minInterval: 1,
          show: true,
          axisLine: {
            lineStyle: {
              width: 1, // 这里是为了突出显示加上的
            },
          },
        },
        {
          splitLine: { show: false },
          type: 'value',
          name: this.$t('平均余币'),
          min: that.min3(list, 'finalAvgCoin'),
          minInterval: 1,
          show: true,
          axisLine: {
            lineStyle: {
              width: 1, // 这里是为了突出显示加上的
            },
          },
        },
      ]
      series = [
        {
          name: this.$t('会员余币'),
          type: 'line',
          symbol: 'circle', // 折线点设置为实心点
          symbolSize: 1, // 折线点的大小
          yAxisIndex: 0,
          data: that.dataBarOrLineAxios(list, 'finalCoin'),
          itemStyle: {
            normal: {
              color: '#F5A518',
            },
          },
        },
        {
          //折线
          name: this.$t('平均余币'),
          type: 'line',
          symbol: 'circle', // 折线点设置为实心点
          symbolSize: 1, // 折线点的大小
          yAxisIndex: 1,
          data: that.dataBarOrLineAxios(list, 'finalAvgCoin'),
          itemStyle: {
            normal: {
              color: '#BF0FB0',
            },
          },
        },
      ]
      myChart7.setOption({
        title: {
          text: text,
          left: 'center',
          show: true,
        },
        tooltip: {
          trigger: 'axis',
          textStyle: {
            align: 'left',
          },
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },
        grid: {
          show: false,
          top: '80',
          bottom: '50',
          right: '60',
          left: '80',
        },
        legend: {
          show: true,
          data: legendData,
          bottom: 0,
          right: 'center',
          itemHeight: 6,
          itemWidth: 20,
          icon: 'roundRect',
          textStyle: {
            fontSize: 11,
          },
        },
        xAxis: {
          splitLine: { show: false },
          type: 'category',
          data: that.dayAxios(list),
          axisPointer: {
            type: 'shadow',
          },
          axisTick: {
            show: true,
            interval: 0,
          },
        },
        yAxis: yAxis,
        series: series,
      })
    },
    test8(list) {
      let that = this
      myChart8 = this.$echarts.init(document.getElementById('myChart8'))
      //商品分类占比
      myChart8.hideLoading()
      myChart8.setOption({
        title: {
          show: true,
          text: this.$t('商品分类占比'),
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: '70%',
          top: 'center',
          icon: 'circle',
          data: that.dataBarOrLineAxios(list, 'goodsKindName'),
          type: 'scroll',
          pageIconColor: '#444',
          pageIconInactiveColor: '#eee',
        },
        series: [
          {
            name: '',
            type: 'pie',
            //radius: ['0%', '60%'],
            center: ['40%', '50%'],
            /* itemStyle:{
              normal:{
                color:function(params) {
                  //自定义颜色
                  var colorList = [ '#e177a7', '#e6b618', '#2682b1', '#9cd419', '#8165a2', '#bd2f81', '#2a9581', '#bbc12d' ];
                  return colorList[params.dataIndex%8]
                }
              },
            }, */
            data: that.dataPieAxios(list, 'amount', 'goodsKindName'),
            label: {
              normal: {
                show: true,
                position: 'inner',
                formatter: '{d}%',
              },
            },
          },
        ],
      })
    },
    test9(list, arg) {
      let that = this
      myChart9 = this.$echarts.init(document.getElementById('myChart9'))
      myChart9.hideLoading()
      // 经营总收入
      if (arg == 1) {
        myChart9.clear()
        that.goodsData = list
      } else if (arg == 2) {
        myChart9.setOption({
          title: {
            show: true,
            text: this.$t('商品数量统计'),
            left: 'center',
          },
          backgroundColor: '#fff',
          series: [
            {
              type: 'wordCloud',
              //size: ['100%', '100%'],
              /* autoSize: {
                enable: true,
                minSize: 12
              }, */
              //用来调整词之间的距离
              gridSize: 2,
              //用来调整字的大小范围
              // Text size range which the value in data will be mapped to.
              // Default to have minimum 14px and maximum 60px size.
              sizeRange: [14, 50],
              // Text rotation range and step in degree. Text will be rotated randomly in range [-90,                                                                             90] by rotationStep 45
              //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
              rotationRange: [-80, 80],
              //随机生成字体颜色
              // maskImage: maskImage,
              drawOutOfBound: true,
              textStyle: {
                normal: {
                  color: function () {
                    return (
                      'rgb(' +
                      Math.round(Math.random() * 240) +
                      ', ' +
                      Math.round(Math.random() * 240) +
                      ', ' +
                      Math.round(Math.random() * 240) +
                      ')'
                    )
                  },
                },
              },
              //位置相关设置
              // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
              // Default to be put in the center and has 75% x 80% size.
              left: 'center',
              top: 'center',
              width: '95%',
              height: '95%',
              //数据
              data: that.dataPieAxios(list, 'amount', 'goodsName'),
            },
          ],
        })
      }
    },
    handleSalesClick(arg) {
      let that = this
      if (arg == 1) {
        that.isList = true
        that.$nextTick(() => {
          that.height = that.$refs.goodsTable.offsetHeight - 80
        })
      } else if (arg == 2) {
        that.isList = false
      }
      that.test9(that.result6, arg)
    },

    test10(list) {
      let that = this
      myChart10 = this.$echarts.init(document.getElementById('myChart10'))
      // 商品销售分析
      myChart10.hideLoading()
      myChart10.setOption({
        title: {
          text: this.$t('商品销售分析'),
          left: 'center',
          show: true,
        },
        tooltip: {
          trigger: 'axis',
          textStyle: {
            align: 'left',
          },
          formatter: function (params) {
            let str = params[0].name
            params.forEach((ps, ind) => {
              str +=
                '<br/>' +
                '<span style="display:inline-block;margin-right:6px;width:10px;height:10px;border-radius:10px;background-color:' +
                ps.color +
                ';"></span>' +
                ps.seriesName +
                ':' +
                ps.value
            })
            return str
          },
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },
        grid: {
          show: false,
          top: '60',
          bottom: '50',
          right: '60',
          left: '60',
        },
        xAxis: {
          splitLine: { show: false },
          type: 'category',
          data: that.dayAxios(list),
          axisPointer: {
            type: 'shadow',
          },
          // 改变x轴颜色
          axisLine: {
            lineStyle: {
              width: 1, // 这里是为了突出显示加上的
            },
          },
          axisTick: {
            show: true,
            interval: 0,
          },
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: this.$t('销售金额'),
            type: 'line',
            symbol: 'circle', // 折线点设置为实心点
            symbolSize: 1, // 折线点的大小
            data: that.dataBarOrLineAxios(list, 'total'),
            itemStyle: {
              normal: {
                color: '#BF0FB0',
              },
            },
          },
        ],
      })
    },

    handleClick(arg) {
      this.checkMember = arg
      this.test5(this.result3, arg)
    },
  },
}
function getDay(day) {
  var today = new Date()
  var s = dayjs(today).format('HH:mm:ss')
  if(s < busiTime){
    day = day-1
  }
  var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
  today.setTime(targetday_milliseconds) //注意，这行是关键代码
  return dayjs(today).format('YYYY-MM-DD HH:mm:ss')
}
</script>
<style lang="scss">
.page-header-index-wide {
  width: 100%;
}
.topcol {
  width: 100%;
  color: white;
  border-radius: 1vw;
  padding: 0.8vw 0;
  box-shadow: 0 10px 10px -10px rgba(9, 9, 9, 0.5);
  p {
    margin: 0;
  }
  .col-title {
    padding: 0 20px 0;
    font-size: 18px;
    line-height: 1;
  }
  .col-detail {
    font-size: 14px;
    padding: 0 20px 0;
  }
  .col-num {
    line-height: 1.2;
    font-size: 36px;
    font-weight: 600;
    text-align: center;
    .col-num-unit {
      padding-left: 2px;
      font-size: 17px;
    }
  }
}
#topcol0 {
  background: -webkit-linear-gradient(to bottom, #f25c72, #da404f);
  background: -o-linear-gradient(to bottom, #f25c72, #da404f);
  background: -mos-linear-gradient(to bottom, #f25c72, #da404f);
  background: -moz-linear-gradient(to bottom, #f25c72, #da404f);
  background: linear-gradient(to bottom, #f25c72, #da404f);
}
#topcol1 {
  background: -webkit-linear-gradient(to right, #f4b03e, #f8d008);
  background: -o-linear-gradient(to right, #f4b03e, #f8d008);
  background: -mos-linear-gradient(to right, #f4b03e, #f8d008);
  background: -moz-linear-gradient(to right, #f4b03e, #f8d008);
  background: linear-gradient(to right, #f4b03e, #f8d008);
}
#topcol2 {
  background: -webkit-linear-gradient(to right, #d063a4, #eb7cb7);
  background: -o-linear-gradient(to right, #d063a4, #eb7cb7);
  background: -mos-linear-gradient(to right, #d063a4, #eb7cb7);
  background: -moz-linear-gradient(to right, #d063a4, #eb7cb7);
  background: linear-gradient(to right, #d063a4, #eb7cb7);
}
#topcol3 {
  background: -webkit-linear-gradient(to right, #3ec6a2, #2fb293);
  background: -o-linear-gradient(to right, #3ec6a2, #2fb293);
  background: -mos-linear-gradient(to right, #3ec6a2, #2fb293);
  background: -moz-linear-gradient(to right, #3ec6a2, #2fb293);
  background: linear-gradient(to right, #3ec6a2, #2fb293);
}
#topcol4 {
  background: -webkit-linear-gradient(to right, #427dd4, #68a8f2);
  background: -o-linear-gradient(to right, #427dd4, #68a8f2);
  background: -mos-linear-gradient(to right, #427dd4, #68a8f2);
  background: -moz-linear-gradient(to right, #427dd4, #68a8f2);
  background: linear-gradient(to right, #427dd4, #68a8f2);
}
#topcol5 {
  background: -webkit-linear-gradient(to right, #896ed5, #a287ea);
  background: -o-linear-gradient(to right, #896ed5, #a287ea);
  background: -mos-linear-gradient(to right, #896ed5, #a287ea);
  background: -moz-linear-gradient(to right, #896ed5, #a287ea);
  background: linear-gradient(to right, #896ed5, #a287ea);
}
.down-charts {
  background: white;
  margin: 0 10px 16px 10px;
  border-radius: 15px;
  box-shadow: 3px 3px 5px rgba($color: #777, $alpha: 0.2);
  padding: 10px;
  height: 18vw;
}

.homeTable {
  margin: 0 10px 16px 10px;
  height: 419px;
  background-color: #fff;
  box-shadow: 3px 3px 5px rgba($color: #777, $alpha: 0.2);
  border-radius: 15px;
  .ant-table-small.ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body {
    border-radius: 0 0 15px 15px;
  }
  .ant-table-small {
    border-radius: 15px;
    .ant-table-content > .ant-table-scroll > .ant-table-header {
      margin: 0;
      table {
        border-radius: 15px 15px 0 0;
        .ant-table-thead {
          tr > th {
            background-color: #5d9cec;
            border-right: 1px solid #e8e8e8;
            color: #fff;
          }
          tr:first-child {
            th:first-child {
              border-top-left-radius: 15px;
            }
            th:last-child {
              border-top-right-radius: 15px;
              border-right: none;
            }
          }
        }
      }
    }
    .ant-table-placeholder {
      border-bottom-left-radius: 15px;
      border-bottom-right-radius: 15px;
    }
    .ant-empty-normal {
      margin: 138px 0 139px;
    }
  }
  .ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-tbody {
    border-radius: 0 0 15px 15px;
    overflow: hidden;
    tr {
      /* &:hover:not(.ant-table-ecpanded-row)>td{background-color: transparent;} */
      &:nth-child(2n) td {
        background-color: #dff1fe;
      }
      &:nth-child(2n + 1) td {
        background-color: #fff;
      }
      td {
        border-right: 1px solid #e8e8e8;
      }
      td:last-child {
        border-right: none;
      }
      &:last-child td:first-child {
        border-bottom-left-radius: 15px;
      }
      &:last-child td:last-child {
        border-bottom-right-radius: 15px;
      }
    }
  }
  .ant-table-row {
    /* &:hover:not(.ant-table-ecpanded-row)>td{background-color: transparent;} */
    &:nth-child(2n) td {
      background-color: #dff1fe;
    }
    &:nth-child(2n + 1) td {
      background-color: #fff;
    }
  }
  &.sceneTable .ant-table-small > .ant-table-content > .ant-table-scroll {
    .ant-table-header > table > .ant-table-thead > tr > th {
      background-color: #9185d9;
    }
    .ant-table-body > table > .ant-table-tbody tr {
      &:nth-child(2n) td {
        background-color: #dedaeb;
      }
      &.ant-table-row:nth-child(2n) td {
        background-color: #dedaeb;
      }
      &:last-child td:first-child {
        border-bottom-left-radius: 15px;
      }
      &:last-child td:last-child {
        border-bottom-right-radius: 15px;
      }
    }
  }
}
.pieTag.ant-tag {
  margin-right: 4px;
  padding: 0 4px;
}
.allTag.ant-tag {
  border: none;
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: #000;
}
.secTag.ant-tag {
  color: #f00;
  border-bottom: 2px solid #f00;
}
.down-charts {
  background: white;
  margin: 0 10px 16px 10px;
  border-radius: 15px;
  box-shadow: 3px 3px 5px rgba($color: #777, $alpha: 0.2);
  padding: 10px;
  height: 18vw;
}
.down-charts1 {
  height: 15vw;
}
.down-chartstable {
  position: absolute;
  width: calc(100% - 20px);
  top: 0;
  bottom: 0;
  padding: 40px 0 10px;
}
.goodsTable {
  height: calc(18vw - 40px);
  margin: 0;
  box-shadow: none;
  .ant-table-small {
    .ant-empty-normal {
      margin-top: calc((18vw - 182px) / 2);
      margin-bottom: calc((18vw - 182px) / 2);
    }
  }
}

@media screen and (max-width: 800px) {
  .topcol {
    height: 11vh;
  }
  * {
    font-size: 14px !important;
  }
  .down-charts {
    height: 50vh;
  }
  .goodsTable {
    height: calc(50vh - 40px);
    .ant-table-small {
      .ant-empty-normal {
        margin-top: calc((50vh - 182px) / 2);
        margin-bottom: calc((50vh - 182px) / 2);
      }
    }
  }
}
</style>